<template>
	<view class="v-tabs" >
		<view class='nav-box' :style="{'position':isFixed ? 'fixed' : 'absolute','top':isFixed ? '0' : 'auto'}">
			<view class='nav-top-box'>
				<view :class='[{"nav-top-item-select":index==navIndex}, "nav-top-item"]' ref="tabs" v-for="(item,index) in title" :key='index'  @click='selectTabs(index)'> <view class='text-title'>{{item}}</view> </view>
			</view>
			<view class='nav-bottom-box'>
				<view ref='navp' :style='{left:leftNav+"px"}'></view>
			</view>
		</view>
		<view style='width: 100%;height: 46px;background:#F3F6FA;'></view>
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				//标题
				type:Array,
				default:[]
			},
			activeTabs:{
				//指定下标
				type:null,
				default:0
			},
			isFixed:{
				//是否置顶
				type:Boolean,
				default:true
			}
		},
		watch:{
			title:{
				handler(newv){
					this.titleLength = newv.length
					//确保修改标题也会再次初始化进度条位置
					const windowWidth = uni.getSystemInfoSync().screenWidth - 30
					this.leftNav = (this.activeTabs * (windowWidth/this.titleLength)) + ((windowWidth/this.titleLength - 50)/2 + 3)
				},
				immediate: true, 
				deep: true
			},
			activeTabs:{
				handler(newv){
					this.navIndex = newv ? newv : 0
					const windowWidth = uni.getSystemInfoSync().screenWidth - 30
					this.leftNav = (this.activeTabs * (windowWidth/this.titleLength)) + ((windowWidth/this.titleLength - 50)/2 + 3)
				},
				immediate: true, 
				deep: true
			},
			isFixed:{
				handler(newv){
					this.isFixed = newv
				},
				immediate: true, 
				deep: true
			}
		},
		data() {
			return {
				titleLength:2,
				leftNav:0,
				navIndex:0,
				// isFixed:true,
				// navTitle:['推荐','热点快讯','新闻资讯'],
				// activeTabs:0
			}
		},
		methods:{
			selectTabs(index){
				this.$emit('tabsHandle',index)
				const windowWidth = uni.getSystemInfoSync().screenWidth - 30
				this.navIndex = index
				this.leftNav = (index * (windowWidth/this.titleLength)) + ((windowWidth/this.titleLength - 50)/2 + 3)
			}
		}
	}
</script>

<style>
	/* #ifdef H5 */
	.nav-box{width: 100%;height: 45px;top: 40px;left: 0;z-index: 8;background-color: #FFFFFF;}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.nav-box{width: 100%;height: 45px;left: 0;z-index: 8;background-color: #FFFFFF;}
	/* #endif */
	.nav-top-box{width: calc(100% - 30px);height: 43px;display: flex;flex-direction: row;align-items: center;margin: 0 auto;}
	.nav-top-box .nav-top-item{flex: 1;height: 100%;line-height: 43px;text-align: center;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.text-title{position: absolute;z-index: 8;height: 17px;line-height: 17px;font-size: 14px;}
	.nav-top-item-select .text-title{color: #333;font-weight: bold;font-size: 16px;}
	.nav-bottom-box{width: 100%;height: 5px;position: relative;top: -5px;z-index: 8;}
	.nav-bottom-box view{width: 73px;background-color: #00CB8B;height: 100%;position: absolute;top: 0;transition: 0.5s;border-radius: 2.5px;}
</style>
